<template>
    <div class="footer">
        <div class="footer-main">
            <el-row class="footer-friend">
                <el-col><span>友链：</span><el-link target='_blank' :underline="false" v-for="item in friendList" :href="item.href" :key="item.id"><span>{{item.name}}</span></el-link></el-col>
            </el-row>
            <el-row class="footer-top"><span>© 2020 - 2021 小和 | <a href="http://beian.miit.gov.cn/" rel="noopener" target="_blank">粤ICP备 2021003498号</a></span></el-row>
            <!-- <el-row class="footer-bottom"><i class="el-icon-user-solid"></i><span> 访问人数</span></el-row> -->
        </div>
    </div>
</template>
<script>
export default {
    name: 'Footer',
    data(){
        return {
            friendList: [{
                id: '1001',
                name: '待添加',
                href: 'https://www.xhblog.cn'
            },{
                id: '1002',
                name: '待添加',
                href: 'https://xhblog.cn'
            }]
        }
    }
}
</script>

<style scoped>

.footer{
    letter-spacing: 1px;
    width: 100%;
    display: flex;
    justify-content: center;
    /* border-top: 1px solid rgb(209, 209, 209); */
    /* background-color: #fff; */
    color: #FFF;
    /* padding: 40px 0; */
}
.footer-main{
    width: 65%;
    margin: auto;
    font-size: 14px;
}
.el-row{
    width: 100%;
    text-align: center;
    padding: 5px 0;

}
.el-row span{
    display: inline-block;
    margin: 0 2px;
}
.el-link{
    margin: 0 10px;
    display: inline-block;
}
.footer a{
    color: #FFF;
}
</style>